<template>
  <div>
    <div class="income-list">
      <income-item v-for="data in state.income" :key="data.id" :income="data" @remove-item="RemoveItem(data.id)" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import IncomeItem from './IncomeItem.vue'
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
  state: {
    type: Object,
    default: () => {
      return {}
    }
  }
})

const emit = defineEmits(['RemoveItem'])

const RemoveItem = (id: number) => {
  for (const item of props.state.income) {
    if (id === item.id) {
      emit('RemoveItem', id)
    }
  }
}
</script>

<style lang="scss" scoped>
.income-list {
  margin-top: 30px;
  padding: 15px;
}
</style>
